<template>
	<view class="container" :class="{unactive:disabled}">
		<view class="bg-color5 padding-sm text-sm text-white text-center">
			提示：根据国家政策要求，发布信息前需要实名认证
		</view>
		<view class="bg-white padding">
			<view class="bg-white text-13 flex justify-between align-center">
				<view class="text-333 flex-sub text-bold">
					店铺名称
				</view>
				<input type="text" v-model="shopName" value="" class="text-13 flex-treble" placeholder="请输入店铺名称" />
			</view>
			<view class="bg-white text-13 flex justify-between align-center margin-top-sm">
				<view class="text-333 flex-sub text-bold">
					地址
				</view>
				<view class="text-767696 margin-right-xs">
				  {{address || '请选择'}}
				</view>
				<!-- <input type="text" v-model="address" value="" class="text-13 flex-treble" placeholder="请输入店铺地址" /> -->
			</view>
			<view class="bg-white text-13 flex justify-between align-center margin-top-sm">
				<view class="text-333 flex-sub text-bold">
					联系电话
				</view>
				<input type="number" v-model="contact" value="" class="text-13 flex-treble" placeholder="请输入店铺联系电话" />
			</view>
			<view class="text-13 text-333 text-bold margin-top-sm">
				上传营业执照及店铺LOGO
			</view>
			<view class="text-767696 bg-white margin-top text-sm">
				请上传清晰身份证件，避免信息模糊审核不通过
			</view>
			<view class="flex justify-between align-center m-card margin-top">
				<view class="flex justify-center align-center flex-direction">

					<view v-if='credentialsPic' style="position: relative;"
						class="flex justify-center align-center i-left">
						<image style="width: 100%;height: 100%;" :src="credentialsPic" mode=""></image>
						<view class="cu-tag bg-red" @tap.stop="DelCredent" style="right:0;top:0;position: absolute;">
							<text class="cuIcon-close"></text>
						</view>
					</view>

					<view v-else class="flex justify-center align-center i-left">
						<image :src="baseUrl +'/static/add.png'" mode=""></image>
					</view>

					<view class="text-sm text-999 margin-top-sm">
						营业执照
					</view>
				</view>
				<view class="flex justify-center align-center flex-direction">
					<view v-if='logo' style="position: relative;" class="flex justify-center align-center i-left">
						<image style="width: 100%;height: 100%;" :src="logo" mode=""></image>
						<view class="cu-tag bg-red" @tap.stop="DelLogo" style="right:0;top:0;position: absolute;">
							<text class="cuIcon-close"></text>
						</view>
					</view>


					<view v-else class="flex justify-center align-center i-right">
						<image :src="baseUrl +'/static/add.png'" mode=""></image>
					</view>
					<view class="text-sm text-999 margin-top-sm">
						LOGO
					</view>
				</view>
			</view>

		</view>
		<view class="margin-top-sm padding bg-white">
			<view class="bg-white text-13 flex justify-between align-center">
				<view class="text-333 flex-sub text-bold">
					法人姓名
				</view>
				<input type="text" v-model="leaderName" value="" class="text-13 flex-treble" placeholder="请输入法人姓名" />
			</view>
			<view class="bg-white text-13 flex justify-between align-center margin-top-sm">
				<view class="text-333 flex-sub text-bold">
					法人证件号
				</view>
				<input type="idcard" v-model="leaderId" value="" class="text-13 flex-treble" placeholder="请输入法人身份证号" />
			</view>
			<view class="text-13 text-333 text-bold margin-top-sm">
				上传法人身份证
			</view>
			<view class="text-767696 bg-white margin-top-sm text-sm">
				请上传清晰身份证件，避免信息模糊审核不通过
			</view>
			<view class="flex justify-between align-center IDcard margin-top-sm">
				<view class="flex justify-center align-center flex-direction">
					<view v-if='leaderIdPicBack' style="position: relative;"
						class="flex justify-center align-center i-left">
						<image style="width: 100%;height: 100%;" :src="leaderIdPicBack" mode=""></image>
						<view class="cu-tag bg-red" @tap.stop="DelBack" style="right:0;top:0;position: absolute;">
							<text class="cuIcon-close"></text>
						</view>
					</view>
					<view v-else class="flex justify-center align-center i-left" @click="uploadBack">
						<image :src="baseUrl +'/static/positive.png'" mode=""></image>
					</view>
					<view class="text-sm text-999 margin-top-sm">
						身份证人像面
					</view>
				</view>
				<view class="flex justify-center align-center flex-direction">
					<view v-if='leaderIdPicFront' style="position: relative;"
						class="flex justify-center align-center i-left">
						<image style="width: 100%;height: 100%;" :src="leaderIdPicFront" mode=""></image>
						<view class="cu-tag bg-red" style="right:0;top:0;position: absolute;">
							<text class="cuIcon-close"></text>
						</view>
					</view>


					<view v-else class="flex justify-center align-center i-right" @click="uploadFont">
						<image :src="baseUrl +'/static/negative.png'" mode=""></image>
					</view>
					<view class="text-sm text-999 margin-top-sm">
						身份证国徽面
					</view>
				</view>
			</view>
		</view>
		<view class="margin-top-sm padding bg-white" v-if='!disabled'>
			<view class="flex justify-between align-center">
				<view class="text-13 text-333 text-bold">
					选择技工服务类型（多选）
				</view>
				<view class="flex justify-start align-center" @click="checkType">
					<view class="">
						请选择
					</view>
					<view class="cuIcon-right lg margin-left-xs">

					</view>
				</view>
			</view>
			<view class="flex flex-wrap margin-top-xs">
				<view class="bg-F4F4F4 round margin-left-xs text-df margin-top-sm color t-btn" v-for="item in checkeds">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="margin-top-sm padding bg-white" v-if='disabled && shopServiceSupportList.length>0'>
			<view class="flex justify-between align-center">
				<view class="text-13 text-333 text-bold">
					技工服务类型
				</view>
				
			</view>
			<view class="flex flex-wrap margin-top-xs">
				<view class="bg-F4F4F4 round margin-left-xs text-df margin-top-sm color t-btn" v-for="item in shopServiceSupportList">
					{{item.shopServiceName}}
				</view>
			</view>
		</view>
		<view class="margin-top-sm padding bg-white">
			<view class="text-13 text-333 text-bold">
				上传门头照片和店内照片
			</view>
			<view style="flex-wrap: wrap;" class="margin-top flex justify-start align-center other-img">
				<view v-if='imgList.length!=0' style="display: flex;">
					<view v-for="item in imgList" style="position: relative;">
						<image style="margin-bottom: 20rpx;" :src="item" mode=""></image>
						<view class="cu-tag bg-red"
							style="right:0;top:0;position: absolute;">
							<text class="cuIcon-close"></text>
						</view>
					</view>

				</view>



				<view class="solids flex justify-center align-center">
					<text class='cuIcon-cameraadd text-30'></text>
				</view>
			</view>



		</view>
		<view class="margin-top-sm padding bg-white">
			<view class="text-13 text-333 text-bold">
				其他资质证明
			</view>
			<view style="flex-wrap: wrap;" class="margin-top flex justify-start align-center other-img">

				<view v-if='imgList2.length!=0' style="display: flex;">
					<view v-for="item in imgList2" style="position: relative;">
						<image style="margin-bottom: 20rpx;" :src="item" mode=""></image>
						<view class="cu-tag bg-red" 
							style="right:0;top:0;position: absolute;">
							<text class="cuIcon-close"></text>
						</view>
					</view>

				</view>

				<view class="solids flex justify-center align-center">
					<text class='cuIcon-cameraadd text-30'></text>
				</view>
			</view>
		</view>
		<block v-if='!disabled'>
			<button class="text-15 text-white bg-color padding text-center btn round" @click="submit">确定</button>
			<view class="text-sm text-333 margin-bottom text-center">
				上传身份信息后，平台将24小时内审核
			</view>
		</block>
	

		
	</view>
</template>

<script>

	import {
		appConfig
	} from '@/common/js/config.js'
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				shopName: '', //店铺名称
				address: '', //地址
				mobile: '', //联系电话
				logo: '', //店铺Logo
				leaderName: '', //法人姓名
				leaderId: '', //法人证件号
				leaderIdPicBack: '', //反面
				leaderIdPicFront: '', //正面,
				contact: '', //联系人
				credentialsPic: '', //营业执照，
				shopType: 1,
				shopServiceCategorys: '', //服务类型
				otherCredentialsPic: '', //其他资质
				otherShopPic: '', //店内照片
				imgList: [],
				imgList2: [],
				options: [],
				checkeds: [],
				longitude:'',
				latitude:'',
				detailedAddress:'',
				disabled: false,
				userInfo:{},
				userInfoMsg:{},
				shopServiceSupportList:[]

			};
		},

		
		onLoad(options) {
			const userInfo = uni.getStorageSync('userInfo')
			if(options.id){
				this.userInfo  =userInfo
				this.disabled  = true
				this.getDetail(options.id)
			}
		},
	
		methods: {
		         async getDetail(id){
				const data ={id}
				const [err,rs] = await this.$get(this.$api.shop_detail,data)
				if(rs){
					this.userInfoMsg = rs.data
					const res = rs.data
					this.shopName  = res.shopName
					this.address = res.address
					this.contact = res.contact
					this.credentialsPic = res.credentialsPic
					this.logo = res.logo
					this.leaderName =res.leaderName
					this.leaderId = res.leaderId
					this.leaderIdPicBack  = res.leaderIdPicBack
					this.leaderIdPicFront =res.leaderIdPicFront
					this.shopServiceSupportList = res.shopServiceSupportList
					this.imgList =res.otherShopPic.split(',')
					this.imgList2 = res.otherCredentialsPic.split(',')
					
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.unactive{
		pointer-events:none;
		margin-bottom: 60rpx;
	}
	.IDcard {
         .i-right,
		.i-left {
			width: 334rpx;
			height: 216rpx;
			background-color: #F4F4F4;

			image {
				width: 156rpx;
				height: 156rpx;
			}
		}

	}

	.m-card {

		.i-right,
		.i-left {
			width: 334rpx;
			height: 216rpx;
			background-color: #F4F4F4;

			image {
				width: 68rpx;
				height: 68rpx;
			}
		}
	}

	.t-btn {
		padding: 18rpx 28rpx;
	}

	.btn {
		margin: 60rpx 20rpx 20rpx;
	}

	.other-img {
		image {
			width: 226rpx;
			height: 226rpx;
		}

		.solids {
			width: 226rpx;
			height: 226rpx;
			background: #F4F4F4;
		}

		.solids::after {
			border: 0;
		}
	}
</style>
